<!--<template>-->
<!--  <div class="reset">-->
<!--    &lt;!&ndash; 上方背景块 &ndash;&gt;-->
<!--    <van-nav-bar-->
<!--      title="购物车"-->
<!--    />-->

<!--    &lt;!&ndash; 购物车商品信息&ndash;&gt;-->
<!--    <van-card-->
<!--      price="2.00"-->
<!--      desc="描述信息"-->
<!--      title="商品标题"-->
<!--      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"-->
<!--    >-->
<!--      <template #tags>-->
<!--        <van-tag plain type="danger">标签</van-tag>-->
<!--        <van-tag plain type="danger">标签</van-tag>-->
<!--      </template>-->
<!--      <template #footer>-->
<!--        <van-stepper v-model="value" input-width="8px" button-size="15px" />-->
<!--        <van-button size="mini">移除</van-button>-->
<!--      </template>-->
<!--    </van-card>-->

<!--    <van-card-->
<!--      price="2.00"-->
<!--      desc="描述信息"-->
<!--      title="商品标题"-->
<!--      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"-->
<!--    >-->
<!--      <template #tags>-->
<!--        <van-tag plain type="danger">标签</van-tag>-->
<!--        <van-tag plain type="danger">标签</van-tag>-->
<!--      </template>-->
<!--      <template #footer>-->
<!--        <van-stepper v-model="value" theme="round" button-size="18" disable-input />-->
<!--        <van-button size="mini">移除</van-button>-->
<!--      </template>-->
<!--    </van-card>-->

<!--    <van-card-->
<!--      price="2.00"-->
<!--      desc="描述信息"-->
<!--      title="商品标题"-->
<!--      thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"-->
<!--    >-->
<!--      <template #tags>-->
<!--        <van-tag plain type="danger">标签</van-tag>-->
<!--        <van-tag plain type="danger">标签</van-tag>-->
<!--      </template>-->
<!--      <template #footer>-->
<!--        <van-stepper v-model="value" input-width="8px" button-size="15px" />-->
<!--        <van-button size="mini">移除</van-button>-->
<!--      </template>-->
<!--    </van-card>-->


<!--    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">-->
<!--      <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">-->
<!--        <van-checkbox v-model="checked">全选</van-checkbox>-->
<!--        <template #tip>-->
<!--          你的收货地址不支持同城送, <span @click="onClickEditAddress">修改地址</span>-->
<!--        </template>-->
<!--      </van-submit-bar>-->
<!--    </van-submit-bar>-->
<!--  </div>-->
<!--</template>-->

<!--<script>-->
<!--export default {-->

<!--}-->
<!--</script>-->


<!--<style lang="less" scoped>-->
<!--  .van-nav-bar{-->
<!--      background-color: #f1503b;-->
<!--      height:45px;-->
<!--  }-->

<!--  .reset /deep/ .van-nav-bar__title {-->
<!--    color: #ffffff;-->
<!--  }-->

<!--  .van-submit-bar {-->
<!--    margin-bottom: 60px;-->
<!--  }-->


<!--</style>-->




<template>
  <!-- 上方背景块 -->
  <div>
    <van-nav-bar
      class="reset"
      title="购物车"
    />

    <!-- 菜单栏 -->
    <div v-if="this.$store.state.username != null">
      <van-checkbox-group v-model="selGoods">
        <!--      <van-swipe-cell v-for="(item, index) in cartlist" :key="index">-->
        <!--        <van-row>-->
        <!--          <van-col span="2" class="leftbox">-->
        <!--            <van-checkbox :name="item"></van-checkbox>-->
        <!--          </van-col>-->
        <!--          <van-col span="22">-->
        <!--            <van-card-->
        <!--              :title="item.title"-->
        <!--              :price="item.price"-->
        <!--              :desc="item.desc"-->
        <!--              :thumb="item.thumb"-->
        <!--              class="goods-card"-->
        <!--            >-->
        <!--              <template #num>-->
        <!--                <van-stepper v-model="item.num" input-width="15px" button-size="20px"/>-->
        <!--              </template>-->
        <!--              <template #footer>-->
        <!--                <van-button size="large"-->
        <!--                  square-->
        <!--                  text="删除"-->
        <!--                  type="danger"-->
        <!--                  class="delete-button"-->
        <!--                  @click="delcard(item, index)"-->
        <!--                />-->
        <!--              </template>-->
        <!--            </van-card>-->
        <!--          </van-col>-->
        <!--        </van-row>-->
        <!--      </van-swipe-cell>-->
        <van-swipe-cell v-for="(item, index) in cartlist" :key="index">
          <van-row>
            <van-col span="2" class="leftbox">
              <van-checkbox :name="item"></van-checkbox>
            </van-col>
            <van-col span="22">
              <van-card
                :price="item.price"
                :title="item.title"
                class="goods-card"
                thumb="https://img01.yzcdn.cn/vant/cat.jpeg"
              >
                <template #num>
                  <van-stepper v-model="item.num" />
                </template>
              </van-card>
            </van-col>
          </van-row>

          <template #right>
            <van-button
              square
              text="删除"
              type="danger"
              class="delete-button"
              style="height: 100%"
              @click="delcard(item, index)"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>
      <div style="width: 100%; height: 50px"></div>
      <!-- 底部 -->
      <van-submit-bar :price="total" button-text="提交订单" @submit="onSubmit">
        <van-checkbox v-model="selAll" @click="checkAll">全选</van-checkbox>
      </van-submit-bar>
    </div>
    <template v-else>
      <van-empty description="还未登录哦(⊙o⊙)？前往登录吧">
        <van-button round type="danger" class="bottom-button" @click="login">登录</van-button>
      </van-empty>
    </template>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        selAll: false,
        selGoods: [],
        total: 0,
        cartlist: [
          {
            num: 1,
            price: 200.00,
            title: "挂帘",
            desc: "安迪慕品高端珠帘水晶装饰水晶帘子玄关隔断帘欧式客厅餐厅卧室屏风挂帘免打孔 金黄色+透明色 21条长0.5米短0.3米雨林",
            thumb:"https://img14.360buyimg.com/n1/jfs/t1/207534/18/8737/109562/618a2484E5deaef95/eaff36351e97f82e.jpg",
          },
          {
            num: 1,
            price: 100.00,
            title: "女装",
            thumb:"https://img14.360buyimg.com/n1/jfs/t1/207534/18/8737/109562/618a2484E5deaef95/eaff36351e97f82e.jpg",
          },
          {
            num: 1,
            price: 50.50,
            title: "玩具",
            thumb:"https://img14.360buyimg.com/n1/jfs/t1/207534/18/8737/109562/618a2484E5deaef95/eaff36351e97f82e.jpg",
          },
          {
            num: 1,
            price: 150.00,
            title: "高达",
            thumb:"https://img14.360buyimg.com/n1/jfs/t1/207534/18/8737/109562/618a2484E5deaef95/eaff36351e97f82e.jpg",
          },
        ],
      };
    },
    methods: {
      // onClickLeft() {
      //   console.log("返回到列表页了");
      // },
      login(){
        this.$router.push('login')
      },
      onSubmit() {},
      checkAll() {
        if (this.selAll) {
          this.selGoods = this.cartlist;
        } else {
          this.selGoods = [];
        }
      },
      delcard(item, index) {
        this.$dialog.confirm({
          message: `您确定要删除${item.title}吗?`,
        })
          .then(() => {
            this.cartlist.splice(index,1);
            let i = this.selGoods.indexOf(item);
            console.log(i)
            if(i!=-1){
              this.selGoods.splice(i,1)
            }
          })
          .catch(() => {
            // on cancel
          });
      },
    },
    watch: {
      selGoods: {
        handler(arr) {
          this.total = 0;
          arr.forEach((item) => {
            // console.log(item.num*item.price)
            this.total += item.num * item.price * 100;
          });

          if (arr.length === this.cartlist.length) {
            this.selAll = true;
          } else {
            this.selAll = false;
          }
        },
        deep: true,
      },
    },
  };
</script>


<style>
  .goods-card {
    margin: 0;
    background-color: white;
  }

  .delete-button {
    height: 100%;
  }
  .van-row {
    margin: 10px 0px;
  }
  .leftbox {
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .van-nav-bar{
    background-color: #ffffff;
    height:45px;
  }

  .reset /deep/ .van-nav-bar__title {
    color: #eaeaea;
  }

  .van-submit-bar {
    margin-bottom: 60px;
  }

  .bottom-button {
    width: 160px;
    height: 40px;
  }
</style>



